@use "everything" as *;

.container {
  @include layout-use-var(top, header-height);

  display: none;
  padding: 0 1rem;
  position: fixed;
  right: scrollbar-size();
  width: var(--toc-width);

  @include rtl {
    left: 0;
    right: auto;
  }
  @include media-or-media-query($layout-navigation-breakpoint) {
    display: grid;
    max-height: calc(100dvh - layout-get-var(header-height));
    overflow: auto;
  }
}

.sticky {
  @include theme-use-var(background-color);

  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1;
}
